<template>
  <div class="no-data">
    <div class="top">
      <img src="../../assets/img/favor/empty_favorite.44731802.png" alt="">
    </div>
    <div class="center">
      <div class="text">暂无收藏</div>
      <div class="icon-text">点击
        <img class="icon" src="../../assets/img/favor/favor.png" alt="">
        即可收藏对应的房东
      </div>
    </div>
    <div class="bottom">
      <button class="btn" @click="toHome">随便逛逛</button>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
function toHome() {
  router.push({
    path: '/home'
  })
}
</script>

<style lang="less" scoped>
.no-data {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .top {
    img {
      width: 100%;
    }
  }

  .center {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;

    .text {
      color: #333;
      font-size: 18px;
      font-weight: 500;
      line-height: 27px;
    }

    .icon-text {
      font-size: 14px;
      color: #666;
      margin-top: 5px;

      .icon {
        width: 15px;
        height: 15px;
      }

    }

  }

  .bottom {
    .btn {
      padding: 0 38px;
      height: 40px;
      line-height: 40px;
      border-radius: 20px;
      background-color: var(--primary-color);
      border: none;
      color: #fff;
      font-size: 16px;
    }
  }

}
</style>